<template>
  <div
    class="dropdown sm:dropdown-end"
    :class="{
      'dropdown-hover': hoverDrop
    }"
  >
    <div
      tabindex="0"
      role="button"
      class="btn m-1"
      :class="{
        'btn-outline': outline,
      }"
    >
      <span v-if="!$slots.label">{{ label }}</span>
      <span v-if="!$slots.label && showValue">：</span>
      <span v-if="!$slots.label && showValue">
        {{ value }}
      </span>

      <slot name="label"></slot>
    </div>
    <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow overflow-hidden">
      <li
        v-for="(item, index) in options" :key="index"
        @click="clickItem(index)"
        class="rounded"
        :class="{
          'bg-base-200': itemActive && index === selectedIndex,
        }"
      >
        <a>{{ item }}</a>
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        selectedIndex: 0,
      }
    },
    computed: {
      value() {
        return this.options[this.selectedIndex];
      }
    },

    props: {
      itemActive: {
        type: Boolean,
        default: true
      },
      hoverDrop: {
        type: Boolean,
        default: false
      },
      outline: {
        type: Boolean,
        default: false,
      },
      label: {
        type: String,
        default: "open",
      },
      options: {
        type: Array,
        required: true,
        default: () => [],
      },
      showValue: {
        type: Boolean,
        default: true
      }
    },
    methods: {
      clickItem(index) {
        this.selectedIndex = index;
        this.$emit("click", index);
        this.$emit("change", index);
      }
    }
  }
</script>
